<template>
  <div class="login">
    <main>
      <van-cell-group border>
        <van-field
          v-model="oldpassword"
          :type="flag1 ? 'password' : 'text'"
          label="旧密码"
          placeholder="请输入旧密码.."
          :right-icon="flag1 ? 'closed-eye' : 'eye-o'"
          @click-right-icon="flag1 = !flag1"
          autofocus
        />
      </van-cell-group>
      <van-cell-group border>
        <van-field
          v-model="newpassword1"
          :type="flag3 ? 'password' : 'text'"
          label="新密码"
          placeholder="请输入新密码.."
          :right-icon="flag3 ? 'closed-eye' : 'eye-o'"
          @click-right-icon="flag3 = !flag3"
        />
        <!-- <van-icon name="closed-eye" /> -->
      </van-cell-group>
      <van-cell-group border>
        <van-field
          v-model="newpassword2"
          :type="flag2 ? 'password' : 'text'"
          label="请确认密码"
          placeholder="请再次输入新密码.."
          :right-icon="flag2 ? 'closed-eye' : 'eye-o'"
          @click-right-icon="flag2 = !flag2"
        />
        <!-- <van-icon name="closed-eye" /> -->
      </van-cell-group>

      <div class="loginBtn">
        <van-button type="danger" round block :disabled="flag" @click="update" 
          >修改</van-button
        >
      </div>
    </main>
  </div>
</template>

<script>
import Vue from "vue";
import { Field, Cell, CellGroup, Button, Toast } from "vant";
import { updatePassword } from "../../apis/user";
Vue.use(Field);
Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(Button);
Vue.use(Toast);

export default {
  data() {
    return {
      oldpassword: "",
      newpassword1: "",
      newpassword2: "",
      flag3: true,
      flag1: true,
      flag2: true,
    };
  },
  methods: {
    update() {
      updatePassword({
        oldpassword: this.oldpassword,
        newpassword1: this.newpassword1,
        userid: localStorage.getItem("userid"),
      }).then((data) => {
        if (data.data.code == "10030") {
          Toast.fail(data.data.message);
        } else if (data.data.code == "200") {
          Toast.success(data.data.message);
        }
      });
    },
  },
  computed: {
    flag(){
      if (
        /^\S*(?=\S{6,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])\S*$/.test(
          this.newpassword1
        ) &&
        this.newpassword1 == this.newpassword2
      ) {
        return false;
      } else {
        return true;
      }
    },
  },
};
</script>

<style scoped>
.loginBtn {
  width: 80%;
  margin: 20px auto;
}
</style>